<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button>点击发送ajax</button>
		<script type="text/javascript">
		
		// ajax发送 分2个过程 1.发送的过程（4步）；2.返还的过程；
		// 发送过程  0-4；从客户端发送到服务端
		/*
			0：请求未初始化（还没有调用 open()）。
			1：请求已经建立，但是还没有发送（还没有调用 send()）。
			2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
			3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
			4：请求已完成；您可以获取并使用服务器的响应了。  //发送已经成功
		*/
		
		
		// 服务端到客户端的状态；返还状态码；
		// 1开头的都是和等待有关   2.成功  3. 重定向 4.页面不存在 5 服务器错误
		/*
		200：ok，页面正确打开，并得到完整的响应内容。
		301：被请求的资源已永久移动到新位置
		302：请求的资源临时从不同的 URI响应请求
		304：缓存
		404：页面不存在。
		500：常指后端代码发生错误
		503：由于临时的服务器维护或者过载，服务器当前无法处理请求。
		*/
		
		
		
		
		//发送get请求的ajax get的ajax
			let btn = document.querySelector("button");
			btn.onclick = function(){
				// 1.创建对象
				let xhr = new XMLHttpRequest();
				// 2.打开 第一个参数是请求方式 第二个参数是地址（api，接口） 第三个参数是是否异步 ，默认是true 异步操作；
				// 相对地址 开发的时候用相对地址；
				console.log(xhr.readyState);
				xhr.open("get","./get.php",true);
				console.log(xhr.readyState);
				// 监控ajax发送到服务器的状态 ；
				// xhr.onreadystatechange = function(){
				// 	// console.log(xhr.readyState);
				// 	// console.log(xhr.status);
				// 	if(xhr.readyState==4 && xhr.status==200){
				// 		console.log(xhr.responseText);
				// 	}
					
					
				// }
				
				
				
				// xhr.open("get","http://localhost/2113/ajax02/get.php");
				xhr.onload = function(){  //代表 1.readyState===4  && 2.status===200
					// console.log(xhr.readyState ,xhr.status);
					console.log(xhr.responseText);  //不是一个标准的json数据
					// json转换的问题；
					let data = JSON.parse(xhr.responseText);
					console.log(data);
				}
				xhr.send();
			}
			
			
			// JSON.parse 只能转纯json数据；
			// var str = '111{"name":"张三","age":"20"}22';
			// var res = JSON.parse(str);
			// console.log(res);
			
			
		</script>
	</body>
</html>
